<link rel="stylesheet" href="/Static/mobile/vant/index.css">
<script src="/Static/mobile/vant/vue.min.js"></script>
<script src="/Static/mobile/vant/vant.min.js"></script>
<div id="app">
    <form id="form" method="POST" class="page">
        <h2 style="padding:20px 15px 15px;color:rgba(69,90,100,.6);">请绑定手机号</h2>
        <van-cell-group>
            <van-field name="mobile" type="tel" v-model="form.mobile" required  label="手机号" placeholder="请输入手机号"></van-field>
            <van-field
                name="code"
                v-model="form.code"
                center required 
                label="短信验证码"
                placeholder="请输入短信验证码"
                type="tel" 
                >
                <van-button @click="sendsms" tag="a" slot="button" size="small" type="primary">
                    {{sendText}}
                    <span v-if="sendNum!=0">{{sendNum}}</span>
                </van-button>
            </van-field>
        </van-cell-group>
    </form>

    <div style="width:90%;margin:1em auto;">
        <van-button onclick="AjaxFormSubmit()" block type="primary" size="normal">立即绑定</van-button>
    </div>
</div>

<script src="__STATIC__mobile/js/areadata.js"></script>
<script src="__STATIC__mobile/js/myarea.js"></script>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            form: {
            },
            sendText: '发送验证码',
            sendNum: 0
        },
        watch: {
            sendNum: function (val,oldval) {
                if(val!=0) {
                    this.sendText = '已发送';
                }else{
                    this.sendText = '发送验证码';
                    clearInterval(window.sendTask);
                }
            }
        },
        mounted: function () {
        },
        methods: {
            sendsms: function () {
                if(this.sendText!='发送验证码') {
                    return false;
                }
                var self = this;
                $.get('/mobile/index/sendsms?mobile='+this.form.mobile).then(function(res){
                    if(res.ret==1) {
                        showerror(res.msg);
                    }else{
                        self.sendNum = 60;
                        window.sendTask = setInterval(function(){
                            self.sendNum--;
                        },1000)
                    }
                })
            }
        }
    })
</script>
<style>
    .van-cell__title {
        max-width: 90px;
    }

    .van-cell__value {
        text-align: left;
    }
</style>